<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
    <script src="jq/jquery-3.6.4/jquery-3.6.4.min.js"></script>
    <script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <style>
        h2{
            text-align: center;
        }
        .mybtn{
            text-align: center;
        }
        table,th{
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>添加用户</h2>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label col-sm-offset-1">请输入姓名</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="username" placeholder="请输入姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="age" class="col-sm-2 control-label col-sm-offset-1">请输入年龄</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="age" placeholder="请输入年龄">
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label col-sm-offset-1">请输入邮箱</label>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
                </div>
            </div>
            <div class="form-group mybtn">
                    <input type="button" value="添加" class="btn btn-primary" onclick="doAdd()">
                    <input type="reset" value="重置" class="btn btn-primary">
            </div>
        </form>
        <table class="table table-bordered table-hover">
            <thead>
                <tr class="text-danger ">
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>tom</td>
                    <td>20</td>
                    <td>22@qq.com</td>
                    <td class="text-center">
                        <input type="button" value="删除" class="btn btn-danger" onclick='doDelete(this)'>
                        <input type="button" value="修改" class="btn btn-info" data-toggle="modal" onclick="updateUserOne(this)" data-target="#myModal">
                    </td>
                </tr>
            </tbody>
        </table>
        <p class="text-right">
            <input type="button" value="全部删除" class="btn btn-danger" onclick="doDeleteAll()">
        </p>

    </div>

    <!-- 模态框声明 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <!-- 窗口声明 -->
        <div class="modal-dialog" role="document">

            <!-- 内容声明 -->
            <div class="modal-content">

                <!-- 头部、主体、脚部 -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">用户信息</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="userNum" class="col-sm-2 control-label">序号</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="userNum" placeholder="Email" disabled>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="usernameOne" class="col-sm-2 control-label">姓名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="usernameOne" placeholder="请输入姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="ageOne" class="col-sm-2 control-label">年龄</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="ageOne" placeholder="请输入年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="emailOne" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="emailOne" placeholder="请输入邮箱">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">

                    <!-- data-dismiss="modal"  关闭模态框-->
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="confirmUpdate()">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



    <script>
        var num=2;
        function doAdd(){
            var username=$("#username").val();
            var age=$("#age").val();
            var email=$("#email").val();
            var arrs=[num,username,age,email,"<input type='button' class='btn btn-danger' value='删除' onclick='doDelete(this)'> <input type='button' class='btn btn-info' value='修改' data-toggle='modal' data-target='#myModal' onclick='updateUserOne(this)'>"];
            var tr=$("<tr></tr>");
            for(var i=0;i<5;i++){
                $("<td>"+arrs[i]+"</td>").appendTo(tr);
            }
            tr.appendTo($("tbody"));
            num++;
        }
        function doDelete(obj){
            $(obj).parent().parent().remove();
        }
        function doDeleteAll(){
            $("tbody tr").remove();
        }

        var upThis;
        function updateUserOne(obj){
            upThis=obj;//将修改按钮的DOM对象存储在全局变量中
            var tr=$(obj).parent().parent();//根据当前修改按钮找到当前所在的行
            var tds=tr.children();
            $("#userNum").val(tds.eq(0).html());
            $("#usernameOne").val(tds.eq(1).html());
            $("#ageOne").val(tds.eq(2).html());
            $("#emailOne").val(tds.eq(3).html());
        }

        function confirmUpdate(){
            // console.log(upThis);
            var userNum=$("#userNum").val();
            var usernameOne=$("#usernameOne").val();
            var ageOne=$("#ageOne").val(); 
            var emailOne=$("#emailOne").val();
            var tr=$(upThis).parent().parent();
            var tds=tr.children();
            tds.eq(0).html(userNum);
            tds.eq(1).html(usernameOne);
            tds.eq(2).html(ageOne);
            tds.eq(3).html(emailOne);
            $("#myModal").modal('hide');
        }
    </script>
</body>

</html>